<!DOCTYPE html>
<html data-layout-decorate="~{bbs/layout/layout}">
<head>
    <title>发布文章</title>
    <link rel="stylesheet"
          data-th-href="@{../../bbs-static/css/jquery.toast.min.css}">
    <script type="text/javascript"
    data-th-src="@{../../bbs-static/js/jquery.toast.min.js}"></script>
    <script type="text/javascript"
            data-th-src="@{../../bbs-static/js/wangEditor.min.js}"></script>
    <script type="text/javascript" data-th-inline="javascript">

        <!-- 判断字符串是否为空 -->
        function isBlank(str) {
            return (!str || /^\s*$/.test(str));
        }

        <!-- 渲染Toast -->
        function toast(txt, icon) {
            $.toast({
                text: txt, // Text that is to be shown in the toast
                heading: '系统提醒', // Optional heading to be shown on the toast
                icon: icon || 'error', // Type of toast icon warning, info, success, error
                showHideTransition: 'slide', // fade, slide or plain
                allowToastClose: true, // Boolean value true or false
                hideAfter: 2000, // false to make it sticky or number representing the miliseconds as time after which toast needs to be hidden
                stack: false, // false if there should be only one toast at a time or a number representing the maximum number of toasts to be shown at a time
                position: 'top-right', // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
            });
        };

        /* 等到页面加载完毕之后渲染富文本编辑器 */
        $(function () {
            var E = window.wangEditor;
            var editor = new E('#editor');
            // 或者 var editor = new E( document.getElementById('editor') )
            // 自定义字体
            editor.customConfig.fontNames = [
                '宋体',
                '微软雅黑'
            ];
            // 自定义配置菜单
            editor.customConfig.menus = [
                'head',  // 标题
                'bold',  // 粗体
                'fontSize',  // 字号
                'fontName',  // 字体
                'italic',  // 斜体
                'underline',  // 下划线
                'strikeThrough',  // 删除线
                'foreColor',  // 文字颜色
                'backColor',  // 背景颜色
                'link',  // 插入链接
                'list',  // 列表
                'justify',  // 对齐方式
                'quote',  // 引用
                'emoticon',  // 表情
                'image',  // 插入图片
                'table',  // 表格
                'video',  // 插入视频
                'code',  // 插入代码
                'undo',  // 撤销
                'redo'  // 重复
            ];
            // 使用 base64 保存图片
            editor.customConfig.uploadImgShowBase64 = true;

            var $text1 = $('#text1');
            editor.customConfig.onchange = function (html) {
                // 监控变化，同步更新到 textarea
                $text1.val(html)
            };
            editor.create();
            // 初始化 textarea 的值
            $text1.val(editor.txt.html())
        });

        /* 点击发布按钮 */
        function submitClick() {
            var title = $('#title').val();
            var articleContent = $('#text1').val();
            var courseId = $('#text_courseId').val();
            if (isBlank(title)) {
                toast('请输入标题', 'error');
                return;
            }
            $.ajax({
                type: 'POST',
                data: {
                    title: title,
                    content: articleContent,
                    courseId: courseId
                },
                success: function (data, status) {

                    console.log('data: '+data);
                    console.log('status: '+status);
                    $(location).attr('href', [[${#httpServletRequest.contextPath}]]+'/bbs/article/'+data.id);
                }
            });
        };

    </script>

</head>
<body>
<section data-layout-fragment="content">

    <div class="container">
        <!-- 提醒 -->
        <div class="alert alert-success">
            <ul>
                <li>请尽量把文章内容提取到标题里，别人才能更容易找到你的文章</li>
                <li>文章发布后你就不能再编辑了</li>
            </ul>
        </div>

        <!-- 发布文章 -->
        <div class="panel-body">
            <form action="demo" method="post">
                <input type="hidden" name="tab" id="tab" value="article">
                <div class="form-group">
                    <label for="text_courseId">课程</label>
                    <select id="text_courseId" name="courseId" class="form-control">
                        <option data-th-each="course:${courseList}" data-th-value="${course.id}" data-th-text="${course.name}">课程名</option>
                    </select>

                </div>
                <div class="form-group">
                    <label for="title">标题</label>
                    <input type="text" name="title" id="title" class="form-control" value="" placeholder="标题">
                </div>
                <div class="form-group">
                    <label for="title">内容</label>
                    <!-- 渲染富文本编辑器 -->
                    <div id="editor"></div>
                    <!--隐藏的文本域，传递的是这个-->
                    <textarea id="text1" name="datails" style="display: none"></textarea>
                </div>

                <button type="button" id="submit-btn" class="btn btn-success" onclick="submitClick()">发布</button>
            </form>
        </div>
    </div>

</section>

</body>
</html>